<template>
  <view>
    <view class="p-lr-20 relative">
      <u-navbar title="选择设备" :background="{ backgroundColor: '#9CE0FF' }" :border-bottom="false" title-color="#000" title-size="37" />
      <view class="ml-20 mr-20 mt-30">

        <u-search :clearabled="true"
                  shape="square"
                  input-align="left"
                  :input-style="{ 'fontSize': '32rpx' }"
                  placeholder-color="#888"
                  border-color="#333"
                  bg-color="#fff"
                  :show-action="false"
                  height="80"
                  placeholder="搜索设备名、设备编号"
                  v-model="queryParams.searchValue"
                  @search="doQuery"></u-search>
      </view>
      <view>
        <u-radio-group :value="currentDeviceId" class="w-full" active-color="#19BE6B" size="40" @change="currentDeviceId = $event">

          <view class="flex justify-center w-full">
            <empty-icon v-if="!dataList.length && !loading"></empty-icon>
          </view>

          <view class="flex w-full flex-column">
            <view class="w-full flex align-center mb-30" v-for="item in dataList" :key="item.deviceId">
              <u-radio class="w-full border-333333 br-10 pl-25" label-size="32" :name="item.deviceId">
                <!-- 图片缩略图 -->
                <view class="flex">
                  <view v-if="item.photoFiles && item.photoFiles.length > 0" class="relative mr-30 mt-20">
                    <image class="h-150 w-150" :data-cur="item.photoFiles[0].link" :src="item.photoFiles[0].link" />
                  </view>

                  <view v-else class="w-150 h-150 bg-CCCCCC flex flex-column align-center justify-center">
                    <image class="w-47 h-40" src="@/static/images/common/empty.png"></image>
                    <text class="color-fff fz-24 lh-33 mt-10">无设备图片</text>
                  </view>
                  <view class="ml-50">
                    <view class="color-333333 fz-32">{{ item.name || '' }}</view>
                    <view class="fz-24 color-CCCCCC"> {{ item.deviceNo || '' }}</view>
                    <view class="fz-24 color-CCCCCC">{{ item.roomName || '' }} </view>
                  </view>
                </view>

              </u-radio>
            </view>
          </view>
        </u-radio-group>
      </view>
    </view>

    <view class="h-176 sticky safe-bottom-0 bg-fff flex justify-end" v-if="dataList && dataList.length > 0">
      <view class="h-60 w-120 br-5 border-2D8CF0 fz-28 color-2D8CF0 lh-60 text-center mr-50 mt-30" @tap="cancel">
        <text>取消</text>
      </view>
      <view class="h-60 w-120 br-5 border-2D8CF0 fz-28 color-fff lh-60 text-center bg-2D8CF0 mr-50 mt-30" @tap="confirm">
        <text>提交</text>
      </view>
    </view>

    <!--未选择模态框-->
    <u-modal border-radius="20" :show-confirm-button="false" :show-title="false" mask-close-able v-model="emptyModel">
      <view class="h-150 flex align-center justify-center font-bold fz-30">
        <image class="mr-20 w-38 h-38" src="@/static/images/mine/error.png"></image>
        <text>请选择设备</text>
      </view>
    </u-modal>

  </view>
</template>

<script>
import EmptyIcon from "@/components/EmptyIcon/EmptyIcon";
import {deviceSearch , getAttachList} from '@/api/hospital/device'

export default {
  name: "ChooseDevice",
  components: { EmptyIcon },
  data() {
    return {
      queryParams: {
        hospitalId: '',
        departmentId: '',
        searchValue: '',
      },
      noMore: false,
      dataList: [],
      loading: false,
      emptyModel: false,
      allowEmpty: true,
      currentDeviceId: ''
    }
  },
  computed: {
    loadMoreStatus() {
      if (this.loading) {return 'loading'}
      if (this.noMore) {return 'nomore'}
      return 'loadmore'
    },
    queryParamsWithDeviceId() {
      return {
        ...this.queryParams,
        deviceId: this.dataList.length ? this.dataList[this.dataList.length - 1].deviceId : '',
      }
    },
  },
  onReachBottom() {
    if (this.loadMoreStatus === 'loadmore') {
      this.getList()
    }
  },
  onLoad(option) {
    this.resetQueryParams()
    this.resetNoMore()
    if (option.hospitalId) {
      this.queryParams.hospitalId = option.hospitalId
    }
    if (option.departmentId) {
      this.queryParams.departmentId = option.departmentId
    }
    if (option.deviceId) {
      this.currentDeviceId = option.deviceId
    }
    if (option.allowEmpty) {
      this.allowEmpty = JSON.parse(option.allowEmpty)
    }
    this.doQuery()
  },
  methods: {
    resetQueryParams() {
      this.queryParams = {
        hospitalId: '',
        departmentId: '',
        searchValue: '',
      }
    },
    resetNoMore() {
      this.noMore = false
    },
    async doQuery() {
      this.loading = true
      try {
        const {data: dataList} = await deviceSearch(this.queryParams)
        const dataWithImgList = await Promise.all(dataList.map(item =>
          getAttachList( item.deviceId).then(res => Promise.resolve({
            ...item,
            photoFiles: res.data
          }))
        ))
        this.dataList = dataWithImgList
        this.noMore = dataWithImgList.length < 10
        this.loading = false
        return Promise.resolve(this.dataList)
      } catch(e) {
        this.loading = false
        return Promise.reject(e)
      }
    },
    async getList() {
      this.loading = true
      try {
        const {data: dataList} = await deviceSearch(this.queryParamsWithDeviceId)
        const dataWithImgList = await Promise.all(dataList.map(item =>
          getAttachList( item.deviceId).then(res => Promise.resolve({
            ...item,
            photoFiles: res.data
          }))
        ))
        this.dataList = this.dataList.concat(dataWithImgList)
        this.noMore = dataWithImgList.length < 10
        this.loading = false
        return Promise.resolve(this.dataList)
      } catch(e) {
        this.loading = false
        return Promise.reject(e)
      }
    },
    cancel() {
      uni.navigateBack({delta: 1})
    },
    confirm() {
      if (!this.allowEmpty && !this.currentDeviceId) {
        this.emptyModel = true
        return
      }
      const eventChannel = this.getOpenerEventChannel()
      const currentDevice = this.dataList.find(item => item.deviceId === this.currentDeviceId)
      if (currentDevice) {
        eventChannel.emit('confirm', {
          deviceId: currentDevice.deviceId,
          deviceName: currentDevice.name,
          deviceNo: currentDevice.deviceNo,
          roomName: currentDevice.roomName
        })
        uni.navigateBack({delta: 1})
      } else {
        uni.showModal({
          title: '确认提交吗?',
          content: '此操作会清空已填写设备数据',
          success: (res) => {
            if (res.confirm) {
              eventChannel.emit('confirm', {
                deviceId: '',
                deviceName: '',
                deviceNo: '',
                roomName: ''
              })
              uni.navigateBack({delta: 1})
            }
          }
        })
      }
    }
  }
}
</script>

<style lang="scss">
page {
  background-color: #FFFFFF;
}
</style>

<style lang="scss" scoped>
/deep/ .u-radio__label {
  margin-left: 20rpx !important;
  padding: 24rpx 0 24rpx 24rpx !important;
  flex: 1 !important;
  width: 560rpx;
}

/deep/ .u-radio {
  width: 100% !important;
  display: flex !important;
  line-height: 1;
}

/deep/ .u-input__input {
  font-size: 32rpx !important;
}

/deep/ .uicon-search {
  font-size: 20px !important;
}
</style>
